<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/detailpage.css">
    <link rel="stylesheet" href="../public/reset.css">
    <script src="../public/js/jquery.js"></script>
</head>
<body>
    <div class="nav-box">
        
    </div>
    <div class="nav-box2">
        
    </div>
    <div class="page-box">
        <div class="page-nav">
            <ul>
                <li><a href="">概览</a></li>
                <li><a href="">设计</a></li>
                <li><a href="">功能</a></li>
                <li><a href="">相机</a></li>
                <li><a href="">操作系统</a></li>
                <li><a href="">技术规格</a></li>
            </ul>
            <span>优先购买码</span>
        </div>
    </div>
    <div class="detail-box">
        <div class="detail-image">
                <div class="image1" >
                    <img src="images/detail_page1.png" alt="">
                    <span></span>
                </div>
                <div class="image2">
                    <img src="images/detail_page1.png" alt="">
                </div>
        </div>
        <div class="detail-bottom">
            <h2>坚果R2</h2>
            <span>是下一代手机，更是下一代电脑</span>
            <div class="cl">
                    <h3>颜色选择</h3>
                    <div class="clr">
                        <p>浅黑色</p>
                        <p>松绿色</p>
                        <p>纯白色光阴特别版</p>
                    </div>
            </div>
            <div class="capacity">
                    <h3>容量选择</h3>
                    <div class="capacityr">
                        <p>8G+128GB</p>
                        <p>8G+256GB</p>
                        <p>12G+256GB</p>
                        <p>16G+512GB</p>
                    </div>
            </div>
            <div class="explain">
                    <h3>服务说明</h3>
                    <p>* 满88包邮</p>
            </div>
            <div class="repair">
                    <h3>保修说明</h3>
                    <div class="repair-right">
                        <div class="one">
                            <div class="one-top">
                                <p>坚果R2意外碎屏保修服务</p>
                                <span>249元/1年</span>
                                
                            </div>
                            <div class="one-bottom">
                                <p>“屏幕意外摔碎，可以免费更换？”</p>
                                <span>折算后仅需0.69元/天</span>
                            </div>
                        </div>
                        <div class="two">
                            <div class="two-right">
                                <p>坚果R2延长保修服务</p>
                                <span>149元/1年</span>
                                
                            </div>
                            <div class="two-right">
                                <p>“将额外多获得1年保修服务”</p>
                                <span>折算后仅需0.41元/天</span>
                            </div>
                        </div>
                        <div class="three">
                            <h4>*保修服务</h4>
                            <span>在您购买“坚果手机意外碎屏保修服务”后的有效期内，在非蓄意破坏的前提下，由于意外坠落、意外挤压或意外碰撞导致手机屏幕碎裂的，可以免费更换一次原装屏幕组件。您可在手机初次联网激活时或收货起 （以在先时间为准）3 日内访问<a href="" target=""> bx.smartisan.com</a> 网站购买，或在本机 设置 > 关于本机 > 保修服务 中购买服务。服务细则参见<a href="">《坚果手机意外碎屏保修服务条款》</a></span>
                        </div>
                    </div>
            </div>
        </div>
    </div>
    <div class="count-box">
        <div class="count">
            <p>您已经选择了</p>
            <div class="tw">
                <div>
                    <span>坚果R2</span>
                    <span>￥6,499.00</span>
                </div>
                <div>
                    <span>纯白色光阴特别版</span>
                    <span>16G+512G</span>
                </div>
            </div>
            <div class="thr">
                <span>￥6,499.00</span>
                <input type="button" value="到货通知">
            </div>
        </div>
    </div>
    <div class="footer-box">

    </div>

</body>
<script src="js/detail_page.js"></script>
<script>
 $(".nav-box").load("../public/public.html .nav",function(){
        
    });
 $(".nav-box2").load("../public/public.html .nav2",function(){
        
    });
 $(".footer-box").load("../public/public.html .footer",function(){
        
    });
</script>

</html>